<template>
  <cover-view class="tab-bar">
    <cover-view v-for="item in lList" :key="item.id" class="tab-bar-item" @click="switchTab(item)">
      <cover-image
          :src="selectId === item.id ? item.selectedIconPath : item.iconPath"
          class="tab-bar-item-logo"
          mode="aspectFit"
      />
      <cover-view :class="[selectId === item.id && 'selectText', 'tab-bar-item-text']">{{ item.text }}</cover-view>
    </cover-view>
    <cover-view class="tab-bar-item addBtn">
      <cover-image :src="diary" mode="aspectFit" @click="pushDiary"/>
    </cover-view>
    <cover-view v-for="item in rList" :key="item.id" class="tab-bar-item" @click="switchTab(item)">
      <cover-image
          :src="selectId === item.id ? item.selectedIconPath : item.iconPath"
          class="tab-bar-item-logo"
          mode="aspectFit"
      />
      <cover-view :class="[selectId === item.id && 'selectText', 'tab-bar-item-text']">{{ item.text }}</cover-view>
    </cover-view>
  </cover-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import diary from '@/static/tabbar/diary.png'

const lList = [
  {
    id: 0,
    pagePath: "pages/keyword/index",
    text: "关键词",
    iconPath: "/static/tabbar/keyword-unactive.png",
    selectedIconPath: "/static/tabbar/keyword-active.png"
  },
  {
    id: 1,
    pagePath: "pages/square/index",
    text: "广场",
    iconPath: "/static/tabbar/square-unactive.png",
    selectedIconPath: "/static/tabbar/square-active.png"
  }
]

const rList = [
  {
    id: 2,
    pagePath: "pages/dailySignature/index",
    text: "日签",
    iconPath: "/static/tabbar/dailySignature-unactive.png",
    selectedIconPath: "/static/tabbar/dailySignature-active.png"
  },
  {
    id: 3,
    pagePath: "pages/my/index",
    text: "我的",
    iconPath: "/static/tabbar/my-unactive.png",
    selectedIconPath: "/static/tabbar/my-active.png"
  }
]

const props = defineProps({
  selectId: {
    type: Number,
    default: 0
  }
})

const emits = defineEmits(['change']) 

const pushDiary = () => {
  uni.navigateTo({
    url: '/pages/diary/index'
  })
}

const switchTab = (item: any) => {
  emits('change', item.id)
  } 
</script>


<style  lang="scss" scoped  >

.tab-bar {
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  padding-top: 20rpx;
  padding-bottom: env(safe-area-inset-bottom);
  width: 100vw;
  height: 96rpx;
  background-color: #fff;
  box-shadow: 0 -12rpx 40rpx 0 #F3F5F9;
  box-sizing: content-box;
.tab-bar-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;

    .tab-bar-item-logo {
      display: block;
      width: 54rpx;
      height: 54rpx;
    }

    .tab-bar-item-text {
      margin-top: 12rpx;
      height: 40rpx;
      font-size: 20rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bold;
      color: #B9BBC5;
      line-height: 20rpx;
    }

    .selectText {
      color: #003597;
    }
  }

  .addBtn {
    position: relative;

    cover-image {
      display: block;
      position: absolute;
      top: -68rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 218rpx;
      height: 178rpx;
    }
  }
}
</style>